{extend name="public/baseLayuimini"}
{block name="title"}{/block}
{block name="css"}
<link rel="stylesheet" href="/static/iconfont/iconfont.css">
<style>
    .review {
        cursor: pointer;
    }

    .layui-btn-container {
        display: flex;
    }

    .layui-btn-container input {
        width: 150px;
        height: 32px;
        margin-right: 10px;
        justify-content: flex-start;
        font-size: 12px;
    }

    .layui-btn-container .layui-form-label {
        font-size: 12px;
        font-weight: 300;
    }
    #test1 {
        display: none;
        position: absolute;
        border: 1px solid #ddd;
        left: 0;
        top: 38px;
        z-index: 10;
        background: #fff;
        min-width: 190px;
        overflow-x: auto;
        padding: 5px 5px 10px 0px;
        max-height:380px;
        overflow-x: auto;
    }
    .icon-guanbi {position: absolute;right: 5px;top: 4px;color: #999;cursor: pointer;display: none;}
</style>
{/block}
{block name="main"}
<div class="main">
    <table id="table" lay-filter="table"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delAll">彻底删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="restoreAll">恢复选中</button>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">条件</label>
                <div class="layui-input-inline">
                    <input type="text" name="search" autocomplete="off" class="layui-input" placeholder="查找标题,短标题等信息">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test6" name="date">
                </div>
            </div>
            <div class="layui-inline column">
                <label class="layui-form-label">栏目</label>
                <div class="layui-input-inline" style="position: relative;">
                    <input type="text" class="layui-input" id="test7" name="column" readonly>
                    <input type="hidden" name="column_id">
                    <div id="test1"></div>
                    <span class="iconfont icon-guanbi"></span>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
            </div>
        </div>
    </div>

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="restore">恢复</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

{/block}
{block name="js"}

<script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'jquery', 'laydate', 'miniTab', 'tableSelect', 'tree','layer'], function () {
        var table = layui.table, $ = layui.jquery, column_id = '{$Request.param.column_id}', laydate = layui.laydate, miniTab = layui.miniTab, tableSelect = layui.tableSelect, tree = layui.tree
        var cols = [
            {type: 'checkbox'},
            {field: 'id', title: 'ID', width: 50},
            {field: 'title', title: '标题'},
            {field: 'short_title', title: '短标题'},
            {field: 'keyword', title: '关键字'},
            {field: 'description', title: '描述'},
            {
                field: 'thumbnail', title: '缩略图', templet: function (d) {
                    if (d.thumbnail) {
                        return '<img class="review" src="' + d.thumbnail + '" style="width: 100%;">'
                    } else {
                        return '';
                    }
                }
            },
            {field: 'file_name', title: '附件'},
            {field: 'create_time', title: '创建时间',width:170,align:'center'},
            {field: 'sort', title: '排序',width:60},
            {field: 'delete_time', title: '删除时间',width:170,align:'center'},
            {field: 'column_name', title: '栏目'},
            {toolbar: '#barDemo', width: 130, title: '操作'},
        ];
        table.render({
            elem: '#table',
            url: '/admin/articleDeleted',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [cols],
            limit: 15,
            page: true
        })
        //头部工具栏
        table.on('toolbar(table)', function (obj) {
            let event = obj.event
            var checkStatus = table.checkStatus(obj.config.id);
            switch(event){
                case 'delAll':
                    var id = checkStatus.data.map(item=>item.id)
                    if(id.length > 0){
                        layer.confirm('真的要将这'+id.length+'条数据全都删除吗',function(index){
                            $.post('/admin/trueDelArticle',{id},res=>{
                                layer.close(index)
                                layer.msg(res.msg)
                                reload({})
                            })
                        })
                    }
                    break;
                case 'restoreAll':
                    var id = checkStatus.data.map(item=>item.id)
                    layer.confirm('恢复这'+id.length+'条数据吗',function(index){
                        $.post('/admin/restoreArticle',{id},res=>{
                            layer.close(index)
                            layer.msg(res.msg)
                            reload({})
                        })
                    })
                    break;
                default:
                    let search = $("input[name='search']").val(),
                        date = $("input[name='date']").val().split('~').filter(item=>item),
                        column_id = $("input[name='column_id']").val()
                    reload({search,date,column_id})
            }
        })
        //单元格工具栏
        table.on('tool(table)', function (obj) {
            var event = obj.event
            var data = obj.data
            switch (event) {
                case 'del':
                    layer.confirm('真的要彻底删掉这篇文章吗,删除后将无法恢复?',function(index){
                        $.get('/admin/trueDelArticle',{id:[data.id]},res=>{
                            layer.close(index)
                            layer.msg(res.msg)
                            reload({})
                        })
                    })
                    break;
                default:
                    layer.confirm('恢复这条文章吗?',function(index){
                        $.get('/admin/restoreArticle',{id:[data.id]},res=>{
                            layer.close(index)
                            layer.msg(res.msg)
                            reload({})
                        })
                    });
            }
        })
        $("body").on('click', '.review', function () {
            layer.photos({
                photos: $(this).parent(),
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        })
        laydate.render({
            elem: '#test6',
            type: 'datetime',
            range: '~'
        });
        //下拉菜单树
        $("body").on('click','#test7',function(){
            console.log(123)
            renderTree(true)
        });
        //删除选中按钮,清除输入框的内容
        $(".icon-guanbi").click(function(){
            $("#test7").val('')
            $("input[name='column_id']").val('')
            $("#test1").slideUp()
            $(this).fadeOut()
        })
        //点击搜索栏目外的任何地方都使下拉菜单隐藏
        $(document).click(function(e){
            var target = $(e.target)
            if(target.closest(".column").length != 1){
                $("#test1").slideUp()
            }
        })
        function renderTree(flag){
            $.get('/admin/columnTree',res=>{
                flag && $("#test1").slideDown()
                inst1 = tree.render({
                    elem: '#test1'  //绑定元素
                    ,data: res
                    ,id:'id'
                    ,click:function(obj){
                        $(".icon-guanbi").fadeIn()
                        if($("#test7").val() != ''){
                            $("#test7").val($("#test7").val() + ',' + obj.data.title)
                            $("input[name='column_id']").val($("input[name='column_id']").val() + ',' + obj.data.id)
                        }else{
                            $("#test7").val(obj.data.title)
                            $("input[name='column_id']").val(obj.data.id)
                        }
                        $("#test1").slideUp()
                    }
                });
            })
        }
        function reload(obj){
            table.reload('table',{where:obj})
            laydate.render({
                elem: '#test6',
                type: 'datetime',
                range: '~'
            });
            renderTree(false)
        }
    })
</script>
{/block}